import React, { Component } from 'react';
import { AppRegistry, ListView, Text, View,StyleSheet,TextInput} from 'react-native';

export default class ListViewBasics extends Component {
  // 初始化模拟数据
  constructor(props) {
    super(props);
    const dsleft  = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    const dsright = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataLeftSource: dsleft.cloneWithRows([
        {id:1,value:'标签一'},
        {id:2,value:'标签二'},
        {id:3,value:'标签三'},
        {id:4,value:'标签四'},
        {id:5,value:'标签五'},
        {id:6,value:'标签六'},
        {id:7,value:'标签七'},
        {id:8,value:'标签八'},
        {id:9,value:'标签九'}
      ]),
      dataRightSource: dsright.cloneWithRows([
        {id:10,value:'标签一2'},
        {id:20,value:'标签二3'},
        {id:30,value:'标签三4'},
        {id:40,value:'标签四5'},
        {id:50,value:'标签五6'},
        {id:60,value:'标签六7'},
        {id:70,value:'标签七5'},
        {id:80,value:'标签八4'},
        {id:90,value:'标签标签九2标签九2标签九2标签九2九2'}
      ]),
    };
  }
  render() {
    return (
      <View style={{ backgroundColor:'#f5f5f5'}}>
         <View style={{height:45,backgroundColor:'black',flexDirection:'row'}}>
             <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
                <Text style={{fontSize:18,color:'white',alignSelf:'center'}}>标签管理</Text>
             </View>
        </View>
        <View style={{height:50,flexDirection:'row'}}>
                <TextInput
                   style={{height:40,fontSize: 15,borderWidth:1,backgroundColor:'white',borderColor:'gray',borderRadius:2,margin:10,textAlign: 'left',textAlignVertical:'center',flex:1}}
                   placeholder="查找你感兴趣的标签..."
                   placeholderTextColor="#aaaaaa"
                   underlineColorAndroid="transparent"
                   numberOfLines={1}
                   ref={'username'}
                   multiline={true}
                />
        </View>
        <View style={{height:45,flexDirection:'row'}}>
            <View style={{flex:1,justifyContent:'center'}}>
               <Text style={{fontSize:18,color:'#aaaaaa',marginLeft:10}}>我的标签</Text>
            </View>
       </View>
        <View style={styles.content}>
          <ListView
            style={styles.LeftContent}
            dataSource={this.state.dataLeftSource}
            renderRow={(rowData) =>
              <View>
                  <View style={styles.itemList}>
                      <Text style={styles.item}>{rowData.value}</Text>
                  </View>
              </View>}
          />
          <ListView
            style={styles.RightContent}
            dataSource={this.state.dataRightSource}
            renderRow={(rowData) =>
              <View>
                  <View style={styles.itemList}>
                      <Text style={styles.item} numberOfLines={1}>{rowData.value}</Text>
                  </View>
              </View>}
          />
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
   content:{
       flexDirection: 'row',
       backgroundColor:'white'
   },
   LeftContent:{
       flex:0.5,
       flexDirection: 'column',
       backgroundColor:'white'
   },
   RightContent:{
       flex:0.5,
       flexDirection: 'column',
       backgroundColor:'white'
   },
   itemList:{
       height:40,
       paddingLeft:10,
       paddingTop:5,
       flexDirection: 'column',
   },
   item:{
       height:30,
       textAlign:'center',
       lineHeight:24,
       borderWidth: 1,
       borderColor: '#F5F5F5',
       borderColor: 'black',
       flexDirection: 'column',
       borderRadius:3,
   },
})
